<template>
  <div class="execution">
    <basic-container>
      <el-link icon="el-icon-plus" v-if="true" type="primary" @click="addOrUpdateHandle()" :underline="false" style="float: right">新增考核内容</el-link>
      <el-form :model="dataForm" @keyup.enter.native="getDataList()" class="form-inline" :inline="true">
        <el-form-item label="考核标准">
          <el-select v-model="dataForm.khbz" filterable placeholder="请输入/选择" clearable @clear="getDataList" @change="getDataList">
            <el-option v-for="(item,index) in dataList" :key="index" :label="item.khbz" :value="item.khbz"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考核内容">
          <el-cascader v-model="dataForm.nrIds" :options="khTree" ref="cascader" @change="handleChange($event)" :props="{ checkStrictly: true, value:'path', label:'nrName' }" :show-all-levels="false"></el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" class="marginLeft" @click="reset()">重置</el-button>
          <el-button icon="el-icon-search" type="primary" class="marginLeft" @click="getDataList(1)">检索</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="dataList" style="width: 100%" stripe border>
        <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
        <el-table-column label="考核内容" prop="nrName" align="center" min-width="260"></el-table-column>
        <el-table-column label="考核标准" prop="khbz" align="center" min-width="260"></el-table-column>
        <el-table-column label="操作" align="center" width="155">
          <template slot-scope="scope">
            <el-button type="primary" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
            <el-button type="danger" @click="deleteData(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>

        <el-table-column label="处罚" align="center">
          <el-table-column label="个人处罚(元)" align="center">
            <el-table-column label="100" align="center" width="60" prop="grcf100">
              <template slot-scope="scope"><i :class="jlOrCf(scope.row.grcf100,'cf')"></i></template>
            </el-table-column>
            <el-table-column label="200" align="center" width="60" prop="grcf200">
              <template slot-scope="scope"><i :class="jlOrCf(scope.row.grcf200,'cf')"></i></template>
            </el-table-column>
            <el-table-column label="500" align="center" width="60" prop="grcf500">
              <template slot-scope="scope"><i :class="jlOrCf(scope.row.grcf500,'cf')"></i></template>
            </el-table-column>
            <el-table-column label="1000" align="center" width="60" prop="grcf1000">
              <template slot-scope="scope"><i :class="jlOrCf(scope.row.grcf1000,'cf')"></i></template>
            </el-table-column>
            <el-table-column label="2000" align="center" width="60" prop="grcf2000">
              <template slot-scope="scope"><i :class="jlOrCf(scope.row.grcf2000,'cf')"></i></template>
            </el-table-column>
            <el-table-column label="3000" align="center" width="60" prop="grcf3000">
              <template slot-scope="scope"><i :class="jlOrCf(scope.row.grcf3000,'cf')"></i></template>
            </el-table-column>
            <el-table-column label="5000" align="center" width="60" prop="grcf5000">
              <template slot-scope="scope"><i :class="jlOrCf(scope.row.grcf5000,'cf')"></i></template>
            </el-table-column>
          </el-table-column>

          <el-table-column label="集体处罚(分)" align="center">
            <el-table-column align="center" width="60" prop="jtcfd5" label="0.5">
              <template slot-scope="scope"><i :class="jlOrCf(scope.row.jtcfd5,'cf')"></i></template>
            </el-table-column>
            <el-table-column align="center" width="60" prop="jtcfz1" label="1">
              <template slot-scope="scope"><i :class="jlOrCf(scope.row.jtcfz1,'cf')"></i></template>
            </el-table-column>
            <el-table-column align="center" width="60" prop="jtcfz2" label="2">
              <template slot-scope="scope"><i :class="jlOrCf(scope.row.jtcfz2,'cf')"></i></template>
            </el-table-column>
            <el-table-column align="center" width="60" prop="jtcfz3" label="3">
              <template slot-scope="scope"><i :class="jlOrCf(scope.row.jtcfz3,'cf')"></i></template>
            </el-table-column>
            <el-table-column align="center" width="60" prop="jtcfz4" label="4">
              <template slot-scope="scope"><i :class="jlOrCf(scope.row.jtcfz4,'cf')"></i></template>
            </el-table-column>
            <el-table-column align="center" width="60" prop="jtcfz5" label="5">
              <template slot-scope="scope"><i :class="jlOrCf(scope.row.jtcfz5,'cf')"></i></template>
            </el-table-column>
          </el-table-column>
        </el-table-column>

        <el-table-column label="奖励" align="center">
          <el-table-column label="个人奖励(元)" align="center">
            <el-table-column label="100" align="center" width="60" prop="grjl100">
              <template slot-scope="scope"><i :class="jlOrCf(scope.row.grjl100,'jl')"></i></template>
            </el-table-column>
            <el-table-column label="200" align="center" width="60" prop="grjl200">
              <template slot-scope="scope"><i :class="jlOrCf(scope.row.grjl200,'jl')"></i></template>
            </el-table-column>
            <el-table-column label="500" align="center" width="60" prop="grjl500">
              <template slot-scope="scope"><i :class="jlOrCf(scope.row.grjl500,'jl')"></i></template>
            </el-table-column>
            <el-table-column label="1000" align="center" width="60" prop="grjl1000">
              <template slot-scope="scope"><i :class="jlOrCf(scope.row.grjl1000,'jl')"></i></template>
            </el-table-column>
            <el-table-column label="2000" align="center" width="60" prop="grjl2000">
              <template slot-scope="scope"><i :class="jlOrCf(scope.row.grjl2000,'jl')"></i></template>
            </el-table-column>
            <el-table-column label="3000" align="center" width="60" prop="grjl3000">
              <template slot-scope="scope"><i :class="jlOrCf(scope.row.grjl3000,'jl')"></i></template>
            </el-table-column>
            <el-table-column label="5000" align="center" width="60" prop="grjl5000">
              <template slot-scope="scope"><i :class="jlOrCf(scope.row.grjl5000,'jl')"></i></template>
            </el-table-column>
          </el-table-column>

          <el-table-column label="集体奖励(分)" align="center">
            <el-table-column align="center" width="60" prop="jtjld5" label="0.5">
              <template slot-scope="scope"><i :class="jlOrCf(scope.row.jtjld5,'jl')"></i></template>
            </el-table-column>
            <el-table-column align="center" width="60" prop="jtjlz1" label="1">
              <template slot-scope="scope"><i :class="jlOrCf(scope.row.jtjlz1,'jl')"></i></template>
            </el-table-column>
            <el-table-column align="center" width="60" prop="jtjlz2" label="2">
              <template slot-scope="scope"><i :class="jlOrCf(scope.row.jtjlz2,'jl')"></i></template>
            </el-table-column>
            <el-table-column align="center" width="60" prop="jtjlz3" label="3">
              <template slot-scope="scope"><i :class="jlOrCf(scope.row.jtjlz3,'jl')"></i></template>
            </el-table-column>
            <el-table-column align="center" width="60" prop="jtjlz4" label="4">
              <template slot-scope="scope"><i :class="jlOrCf(scope.row.jtjlz4,'jl')"></i></template>
            </el-table-column>
            <el-table-column align="center" width="60" prop="jtjlz5" label="5">
              <template slot-scope="scope"><i :class="jlOrCf(scope.row.jtjlz5,'jl')"></i></template>
            </el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table>
    </basic-container>

    <div class="avue-crud__pagination">
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background
                     layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>
    <infoForm v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></infoForm>
  </div>
</template>

<script>
import {fetchList, delObj} from '@/api/admin/syskaohestandardinfo'
import {fetchListTree} from "@/api/admin/syskaohestandardnr";
import infoForm from './info-form'


export default {
  components: {
    infoForm
  },
  data() {
    return {
      searchForm: {},
      dataList: [],
      addOrUpdateVisible: false,
      //搜索条件
      dataForm: {
        nrId: '',
        nrIds: '',
        khbz: '',
      },
      //翻页
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      khTree: [],
    }
  },
  computed: {},
  created() {
    this.getDataList()
    this.getKhTree()
  },
  methods: {
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      })
    },
    //删除
    deleteData(id) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delObj(id).then((res) => {
          this.$notify.success('删除成功');
          this.getDataList()
        })
      })

    },
    //初始化
    init(code) {
      this.dataForm.userCode = code;
      this.getDataList();
    },
    //获得数据
    getDataList(page) {
      if (page) {
        this.pageIndex = page
      }
      fetchList(Object.assign({
        current: this.pageIndex,
        size: this.pageSize
      }, this.dataForm))
        .then((res) => {
          this.dataList = res.data.data.records;
          this.totalPage = res.data.data.total;
        })
    },
    //获得考核内容树
    getKhTree() {
      fetchListTree().then((res) => {
        this.khTree = res.data.data;
      });
    },
    //重置
    reset() {
      this.dataForm = {
        nrId: '',
        nrIds: '',
        khbz: '',
      }
      this.getDataList();
    },
    //处罚、奖励
    jlOrCf(data, type) {
      if (type == 'cf') {
        return (data ? 'el-icon-success red' : null);
      } else if (type == 'jl') {
        return (data ? 'el-icon-success green' : null);
      }
    },
    //级联,下拉
    handleChange(event) {
      this.dataForm.nrIds = event[event.length - 1]
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
  }
}
</script>
